<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
<!-- 1.下载npm install vue-router@3.0.1
     2.引入vueRouter.js
     3.定义路由
        3.1 定义路由所需要的组件
        3.2 定义规则-规定哪个地址跳到哪个组件
        3.3 根据规则定义路由
     4.把路由挂载到vue实例
     5.显示
        5.1定义显示区域
        5.2超链接跳转:通过路由定义的路径跳转到指定的组件，并显示


           -->
    <script src="node_modules/vue-router/dist/vue-router.js"></script>
</head>
<body>
    <div id="app">
<!--   5.2超链接跳转      -->
        <router-link to="/index">首页</router-link>
        <router-link to="/product">产品页</router-link>
        <router-link to="/about">详情页</router-link>
<!--     5.1定义显示区域    -->
        <router-view></router-view>
    </div>
</body>
    <script>
        // 3.1 定义路由所需要的组件
       let index =Vue.component("index",{
            template:"<h3 style='color: red' >哈哈</h3>"
        })
       let product =Vue.component("product",{
           template:"<h3 style='color: blue' >呃呃呃</h3>"
       })
       let about =Vue.component("about",{
           template:"<h3 style='color: yellow'>更改</h3>"
       })
        // 3.2 定义规则-规定哪个地址跳到哪个组件
        const  routes=[
            {
                path: '/index',
                component: index
            },
            {
                path: '/product',
                component: product
            },
            {
                path: '/about',
                component: about
            }
        ]
        //3.3 根据规则定义路由
        const router = new VueRouter({
            routes: routes
        })
        new Vue({
            el:"#app",
            data:{},
            //4.把路由挂载到vue实例
            //router:router   可以这样写
            router
        })
    </script>
</html>